<template>
  <div class="login-container">
    <transition name="login">
      <div class="login" v-show="show">
        <div class="l"></div>
        <div class="r">
          <el-tabs stretch v-model="type">
            <el-tab-pane name="sms" label="短信登陆">
              <el-input placeholder="手机号" v-model="formData.phone" />
              <el-input placeholder="验证码" v-model="formData.code" @keyup.native.enter="login">
                <!-- 验证码 -->
                <el-button
                  slot="append"
                  :disabled="!formData.phone || sendTime < 60"
                  @click="onSend"
                >
                  {{ sendLabel }}
                </el-button>
              </el-input>
              <el-button type="primary" :loading="loading" @click="login">登陆</el-button>
              <!-- :loading="true" -->
            </el-tab-pane>
            <!-- -------------------- -->
            <el-tab-pane label="密码登陆" name="password">
              <el-input placeholder="用户名" v-model="formData.username" />
              <el-input
                type="password"
                placeholder="密码"
                v-model="formData.password"
                @keyup.native.enter="login"
              />
              <el-button type="primary" :loading="loading" @click="login">登陆</el-button>

            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
// import axios from "axios";
export default {
  mounted() {
    // setTimeout(() => {
    //   const el = document.querySelector(".login");
    //   el.className = "login show";
    // }, 500);
    this.show = true;
  },
  data() {
    return {
      type: "sms", //手机号短信登陆sms，用户名密码登录password
      // v-model的值
      formData: {
        phone: "",
        code: "",
        username: "",
        password: "",
      },
      sendTime: 60,
      timeId: null,//
      show: false, //过渡显示
      loading: false, //正在请求
    };
  },

  computed: {
    // 验证码倒计时的时间
    sendLabel() {
      if (this.sendTime < 60) {
        return this.sendTime + "秒后重发";
      } else {
        return "发送验证码";
      }
    },
  },

  methods: {
    //点击验证码
    onSend() {
      this.getCode();
      // 先校验手机号，通过校验后调用验证码接口
      if (!/^1\d{10}$/.test(this.formData.phone)) {
        // console.log(1);
        return this.$message.error("手机号格式不对");
      }
      this.sendTime--;
      //验证码倒计时
      this.timeId = setInterval(() => {
        this.sendTime--;
        if (this.sendTime === 0) {
          clearInterval(this.timeId);
          this.sendTime = 60;
        }
      }, 1000);
    },
    // 请求数据
    getCode() {
      this.axios.post("/code", {
        phone: this.formData.phone,
      });
    },
    // 登录
    login() {
      //点了一次就能点了  防止再次发送请求
      if (this.loading) return;
      this.loading = true;

      const params = {
        type: this.type,
      };
      if (this.type === "sms") {
        params.phone = this.formData.phone;
        params.code = this.formData.code;
      } else {
        params.username = this.formData.username;
        params.password = this.formData.password;
      }

      this.axios
        .post("/login", params)
        .then((data) => {
          if (data.code === 0) {
            this.show = false;
            setTimeout(() => {
              this.$router.push("/main");
            }, 1500);
          }
        })
        .finally(() => {
          this.loading = false;
        });
      //原生方法
      // const xhr = new XMLHttpRequest();
      // xhr.open('POST','/equipment/login')
      // xhr.onreadystatechange=()=>{
      //   if(xhr.readyState === 4 && xhr.status === 200){
      //     // console.log(xhr.responseText);
      //     const data = JSON.parse(xhr.responseText)
      //     if(data.code===0){
      //       this.$router.push('/main')
      //     }else{
      //       // 错误提示
      //       this.$message.error(data.msg)
      //     }
      //   }
      // }
      // xhr.send(JSON.stringify({
      //   code:"654321",
      //   phone:'13800138001',
      //   type:'sms'
      // }))
    },
  },
};
</script>
<style lang="sass" scoped>
.login-container
  position: fixed
  top: 0
  left: 0
  right: 0
  bottom: 0
  background: url(~@/assets/img/login-bg.png) no-repeat
  background-size: cover
  display: flex
  justify-content: center
  align-items: center
  .login
    width: 800px
    height: 400px
    background: #fff
    display: flex
    border-radius: 10px
    overflow: hidden
    // opacity: 0
    // transform: translateY(10%) scale(.8)
    // transition: .5s
    // &.show
    //   opacity: 1
    //   transform: translateY(0) scale(1)
  .l
    flex: 0 0 490px
    background-size: cover
    background: url(~@/assets/img/login-left.png) no-repeat
  .r
    flex: 1
    padding: 60px 40px 0
    .el-input
      margin-bottom: 15px
    .el-tab-pane>.el-button
      width: 100%

  //来/显示之前的状态
  .login-enter
    opacity: 0
    transform: translateY(10%) scale(.8)
  //在显示的整个过程中都有的class，定义过渡
  .login-enter-active
    transition: 1.5s
  //下面两个标签跟本身样式一样
  // .v-enter-to
  // .v-leave
  //隐藏/离开的样式
  //离开的过度
  .login-leave-active
    transition: 1.5s
  //离开之后的样式
  .login-leave-to
    opacity: 0
    transform: translateY(-20%) scale(.6)
</style>
